﻿/// <reference path="jquery-2.0.2.js" />

var ui = (function () {
    return {
        mainUI: function (username, allArticles) {
            var allHtml = "";

            var header = this.headerHtml(username);
            allHtml += header;

            var articlesHtml = this.articlesHtml(allArticles);
            allHtml += articlesHtml;

            var addButtonHtml = '<button id="btn-create-article">New article</button>';
            allHtml += addButtonHtml;

            var mainUIHtml = this.mainUIHtml();
            allHtml += mainUIHtml;

            return allHtml;
        },
        loginForm: function () {
            var loginFormHtml =
                '<form id="login">' +
                    '<fieldset>' +
                        '<legend>Login:</legend>' +
                        '<label for="tb-login-username">Username: </label>' +
                        '<input type="text" id="tb-login-username">' +
                        '<label for="tb-login-password">Password: </label>' +
                        '<input type="password" id="tb-login-password">' +
                        '<button id="btn-login">Login</button>' +
                    '</fieldset>' +
                '</form>'
            '<div id="error-messages"></div>';
            return loginFormHtml;
        },
        registerForm: function () {
            var registerFormHtml =
                '<form id="register">' +
                    '<fieldset>' +
                        '<legend>Register new user</legend>' +
                        '<label for="tb-register-username">Username: </label>' +
                        '<input type="text" id="tb-register-username">' +
                        '<label for="tb-register-password">Password: </label>' +
                        '<input type="password" id="tb-register-password">' +
                        '<button id="btn-register">Register</button>' +
                    '</fieldset>' +
                '</form>';
            return registerFormHtml;
        },
        headerHtml: function (username) {
            var headerHtml =
            '<header id="logo">' +
            '   <h1>Leonardo News</h1>' +
            '</header>' +
            '<header id="user-data">' +
            '<span id="nickname">Logged in as ' + username + '</span>' +
            '<button id="btn-logout">Logout</button>' +
            '</header>';

            return headerHtml;
        },
        articlesHtml: function (articles) {
            var html = '<aside id="articles">';

            for (var i = 0; i < articles.length; i++) {
                html += this.singleArticleHtml(articles[i]);
            }

            html += '</aside>';

            return html;
        },

        mainUIHtml: function () {
            var mainUIHtml =
                '<div id="article-container">' +
                    '<article id="article">' +
                    '</article> ' +
                    '<img id="article-img"/> ' +
                    '<div id="votes">' +
                        '<a id="up" href="#">Up</a>' +
                        '<p id="vote-result">0</p>' +
                        '<a id="down" href="#">Down</a>' +
                    '</div>' +
                    '<section id="comments-container">' +
                        '<div id="comment">' +
                            '<div id="sub-comment">' + '</div>' +
                        '</div>' +
                    '</section>' +
                 '</div>';

            return mainUIHtml;
        },

        singleArticleHtml: function (article) {
            console.log(article);
            var singleArticleHtml =
            '<div id="' + article.ID + '">' +
                    '<a href="#">' +
                    article.Title;
            if (article.User) {
                singleArticleHtml += '<span class="author"> by ' + article.User.Username + '</span></a>';
            }
            singleArticleHtml += '</a></div>';

            return singleArticleHtml;
        },

        articleView: function (article) {
            var articleHtml = "";

            articleHtml += '<h2>' + article.Title + '</h2>';
            if (article.User) {
                articleHtml += '<p> Author: ' + article.User.Username + '</p>';
            }
            articleHtml += '<p>' + article.Text + '</p>';

            return articleHtml;
        },
        comments: function (article) {
            var commentHtml = "";

            for (var i = 0; i < article.Comments.length; i++) {
                if (article.Comments[i].ParentCommentId == null) {
                    commentHtml += '<div class="parent-comment">' + article.Comments[i].Text + '</div>';
                }
                else {
                    for (var j = 0; j < article.Comments.length; j++) {
                        if (article.Comments[j].ID == article.Comments[i].ParentCommentId) {
                            commentHtml += '<div>' + article.Comments[i].Text + '</div>';
                        }
                    }
                }
            }

            return commentHtml;
        },
        createArticleHtml: function () {
            var articleForm =
                '<form id="register">' +
                    '<fieldset>' +
                        '<legend>Create new article</legend>' +
                        '<label for="tb-title">Title: </label>' +
                        '<input type="text" id="tb-title" size="60"><br />' +
                        '<label for="ta-content">Content: </label>' +
                        '<textarea id="ta-content" rows="10" cols="50"></textarea><br />' +
            '<label for="image-url">Image: </label>'
            '<div>' +
            '<form id="uploadImage" enctype="multipart/form-data">' +
            '<label>                                              ' +
            '    Upload file                                      ' +
            '</label>                                             ' +
            '<input name="file" type="file" />                    ' +
            '<input type="button" id="Upload" value="Upload" />   ' +
            '</form>' +
            '</div>';
                        '<button id="btn-post-article">Create</button>' +
                    '</fieldset>' +
                '</form>';

            return articleForm;
        },

        pubNub: function () {
        }
    }
}());